<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/qingchu.css">
    <link rel="stylesheet" href="css/电视列表.css">
</head>

<body>
    <header></header>
    <main>
        <div class="banner">
            <div class="banner_nav" style="margin-bottom: 0px;">
                <strong class="business-strong">
                    <a style="letter-spacing: 2px; font-size: 14px; font-weight: 400; line-height: 30px;">首页&gt;
                    </a>超级电视
                </strong>
            </div>
            <div class="main_left">
                <div class="category">
                    <div class="category_name"><span>
                            <div>超级电视</div>
                        </span>
                    </div>
                    <div class="category_list" style="margin-top: 3px;">
                        <ul>
                            <li><a href="javascript:;">高端旗舰GS系列</a></li>
                            <li><a href="javascript:;">高端性价比F系列</a></li>
                            <li><a href="javascript:;">高色域GPro系列</a></li>
                            <li><a href="javascript:;">全面屏系列</a></li>
                            <li><a href="javascript:;">4k高清电视</a></li>
                            <li><a href="javascript:;">语音遥控电视</a></li>
                            <li><a href="javascript:;">蓝光护眼电视</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="main_right">
                <div class="choose_box_bottom clearfix" style="box-sizing: border-box;">
                    <div class="fl">
                        <div class="choose_item" style="width: auto;">
                            <a class="selected">综合排序</a>
                            <a>价格</a>
                            <a href="javascript:;" class="">销量</a> <a class="">好评</a>
                        </div>
                    </div>
                    <div class="fr">此类商品共<span class="colrpd">18</span>个</div>
                </div>
                <div class="goods_content">
                    <ul class="clearfix" id="xuanran">

                    </ul>
                </div>
            </div>

        </div>
    </main>
    <footer></footer>
</body>

</html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    $("header").load("1.header.html");
    $("footer").load("3.foot.html");
</script>
<script>
    $("header").delegate(".nav", "mouseover", function() {
        $(".navsort_cent_quanbu_select").css({
            display: "none"
        })
    })
</script>
<script>
    $(".navsort_cent_quanbu_select").css({
        display: "none"
    })
</script>
<script>
    $(function() {
        getData()
    })

    function getData() {
        $.get("goodsAndShoppingCart/getGoodsList.php", {
            "typeId": "002"
        }, function(data) {
            console.log(JSON.parse(data));
            let arr = JSON.parse(data);
            let str = '';
            arr.forEach((item, index) => {
                str += `<li >
                            <div class="ac_list fl" goodsid="${item.goodsId}">
                                <div class="tab_content">
                                    <div class="list_good_img">
                                        <a href="#" >
                                            <img src="${item.goodsImg}"
                                                alt="" class="lazy">
                                        </a>
                                    </div>
                                    <div class="list_good_des">
                                        <a href="#" >${item.goodsName}
                                        </a>
                                    </div>
                                    <div class="list_good_price clearfix">
                                        <div class="list_good_price_new list">
                                            <span>￥${item.goodsPrice}</span>
                                            <del>${item.beiyong2}</del>
                                            <em class="fr" style="color: rgb(225, 51, 53);">${item.goodsCount}
                                            </em>
                                        </div>
                                    </div>
                                    <div class="list_good_addbox clearfix">
                                        <a class="list_good_addcart fl addcar">
                                            <span>加入购物车</span>
                                        </a>
                                        <a href="#" class="list_good_addfav fr myfav_38340">查看详情
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>`

            })
            $("#xuanran").html(str);
        })
    }
    $("#xuanran").on('click', 'div', function(e) {
        if (e.target.nodeName == 'DIV') {
            console.log(e.target.getAttribute('goodsid'));
            let id = e.target.getAttribute('goodsid');
            location.href = '4.详情页.html?goodsId=' + id;
        }
    })
</script>